<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="订单详情"
        left-arrow
        @click-left="$router.back()"
      />
    </header>
    <div class="content">
      <van-notice-bar
            left-icon="volume-o"
            wrapable
            :scrollable="false"
            text="由于促销活动订单量较多,发货及配送时效预计延误1-2天,我们将尽快为您配送,请耐心等待"
          />
      <div class="orderState">
        <div v-if="state === 0">
          <van-icon name="balance-pay" />
          <h4>代付款</h4>
          <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3565118550,76221160&fm=26&gp=0.jpg" alt="">
        </div>
        <div v-if="state === 1">
          <van-icon name="shop-o" />
          <h4>代收货</h4>
          <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3565118550,76221160&fm=26&gp=0.jpg" alt="">
        </div>
      </div>
      <van-address-list
        :list="addressList"
        default-tag-text="默认"
        @edit="onEdit"
      />
      <h3>订单号：{{id}}</h3>
      <van-card
        v-for="data in proData"
        :key="data.proId"
        :num="data.num"
        :price="data.price"
        :title="data.proName"
        :thumb="data.proImg1"
      />
      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
        :class="state === 0 ? '' : 'hide'"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
        :class="state === 0 ? '' : 'hide'"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
      <van-submit-bar :class="state === 0 ? '' : 'hide'" :price="allPrice" button-text="付款" @submit="onSubmit" />
    </div>
    <van-popup v-model="show">
      <img :src="payImg" alt="">
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { AddressList, NavBar, Toast, Card, CouponCell, CouponList, Popup, SubmitBar, NoticeBar, Icon } from 'vant'

import { getOrderdetail, getAddress, getCoupon, wxPay } from '../../api/index.js'

import { mapState } from 'vuex'

Vue.use(AddressList)
Vue.use(NavBar)
Vue.use(Toast)
Vue.use(Card)
Vue.use(CouponCell)
Vue.use(CouponList)
Vue.use(Popup)
Vue.use(SubmitBar)
Vue.use(NoticeBar)
Vue.use(Icon)

export default {
  data () {
    return {
      addressList: [],
      proData: [],
      chosenCoupon: -1,
      coupons: [],
      disabledCoupons: [],
      showList: false,
      state: 0,
      show: false,
      payImg: ''
    }
  },
  mounted () {
    getOrderdetail({
      userId: this.userId,
      orderId: this.id
    }).then(res => {
      // console.log(res)
      this.proData = res.data.data.proData
      getAddress().then(data => {
        this.addressList = data
      })
      this.state = res.data.data.state - 0
      console.log(this.state)
    })
    getCoupon().then(data => {
      this.coupons.push(data)
      // console.log(data)
    })
  },
  props: ['id'],
  methods: {
    onEdit () {
      Toast('编辑地址')
    },
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
      this.coupons.push(code)
    },
    onSubmit () {
      // payOrder({
      //   userId: this.userId,
      //   orderId: this.id
      // }).then(res => {
      //   this.$router.push('/cart')
      // })
      this.show = true
      wxPay({
        body: '唯品会商城-服装产品',
        out_trade_no: this.id,
        total_fee: 1
      }).then(res => {
        // console.log('已付款')
        console.log(res.data.data)
        this.payImg = res.data.data
        setTimeout(() => {
        this.show = false
        }, 10000)
      })
    }
  },
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin,
      userId: state => state.user.userId
    }),
    allPrice () {
      const sum = this.proData.reduce((prev, next) => {
        return prev + next.num * next.price
      }, 0)
      if (this.chosenCoupon !== -1) {
        return sum * 100 - this.coupons[this.chosenCoupon].value
      }
      return sum * 100
    }
  }
}
</script>

<style lang='scss'>
.content {
  background: #eee;
}
.van-radio__icon {
  display: none;
}
.van-address-list {
  height: 1rem;
  padding: 0;
}
.van-address-list__bottom {
  display: none;
}
.hide {
  display: none;
}
.content h3 {
  padding-left: 0.1rem;
}
.orderState div {
  padding: 0.1rem 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  img {
    height: 0.8rem;
  }
  i {
    font-size: 28px;
  }
  h4 {
    margin-right: 1rem;
  }
}
</style>
